<template>
	<view>
		<!-- 返回首页 -->
		<!-- <uni-bankhome /> -->
		<scroll-view scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y
			lower-threshold="250" class="scoll-page">
			<!-- 搜索 -->
			<view class="nodata" v-if="goodsList===''">
				<u-loading mode="circle" size="28"></u-loading> 加载中……
			</view>
			<view class="nodata" v-else-if="goodsList.length===0">
				<image src="@/static/nodata.png" mode=""></image>
				<p>暂无数据!</p>
			</view>
			<!-- 一行两个商品展示 -->
			<view v-else class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item"
					@click="navigateToDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.small" mode="aspectFill"></image>
					</view>
					<view class="goods-detail">
						<div class="title clamp">
							{{ item.goodsName }}
						</div>
						<div class='evaluate'>
							<span class='grade'>{{item.score||0.0}}分</span>
							<span class='sales'>
								月售 {{item.monthSales ||0}}+
							</span>
						</div>
						<div class="goods-bottom">
							<div class="goods-price">
								<text class="hb-money">{{ item.price | unitPrice }}</text>
							</div>
						</div>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
			<pay-password ref="payPassword"></pay-password>
		</scroll-view>
	</view>

</template>

<script>
	import {
		getHotGoodsList,
		getGoodsRelated,
		newGoods
	} from "@/api/goods.js";
	import payPassword from "@/components/pay-password/pay-password.vue"
	import {
		getHotKeywords,
		GetCommodity,
		GetHotGoods,
	} from "@/api/home.js";
	import storage from "@/utils/storage";
	export default {
		data() {
			return {
				scrollTop: 0,
				loadIndex: 10,
				oldKeywordIndex: "",
				goodsHeight: "",
				keyword: "",
				goodsList: "",
				loadingType: "more", //加载更多状态
				params: {
					pageNumber: 1,
					pageSize: 10,
				},
				routerVal: "",
				name: '', //判断今日爆品
			};
		},
		onLoad(val) {
			this.name = val.name
			uni.setNavigationBarTitle({
				title: val.name
			});
			this.loadData();
		},
		components: {
			payPassword
		},
		onReachBottom() {
			if (this.loadingType == "noMore") return
			this.params.pageNumber++;
			this.loadData();
		},
		mounted() {

		},
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type, loading) {
				this.loadingType = "loading";
				if (type == "refresh") {
					this.goodsList = [];
				}
				//没有更多直接返回 #TODO
				if (this.name == '新品优选') {
					let goodsList = await newGoods({
						pageSize: 10,
						pageNumber: this.params.pageNumber,
						marketEnable: "UPPER",
						...this.params
					})
					if (goodsList.data.result.records.length < 10) {
						this.loadingType = "noMore";
					}
					if (this.goodsList === '') {
						this.goodsList = []
					}
					// 分页的时候用
					this.goodsList.push(...goodsList.data.result.records);
					uni.hideLoading();
				} else {
					let goodsList = await GetHotGoods({
						pageSize: 10,
						pageNumber: this.params.pageNumber,
						marketEnable: "UPPER",
						...this.params
					})
					if (goodsList.data.result.records.length < 10) {
						this.loadingType = "noMore";
					}
					if (this.goodsList === '') {
						this.goodsList = []
					}
					// 分页的时候用
					this.goodsList.push(...goodsList.data.result.records);
					uni.hideLoading();
				}
			},
			// 格式化金钱  1999 --> [1999,00]
			formatPrice(val) {
				if (typeof val == "undefined") {
					return val;
				}
				return val.toFixed(2).split(".");
			},
			// 展示更多数据
			showMore() {
				this.loadOldKeyword(this.oldKeywordIndex);
			},
			// 跳转到商品详情
			navigateToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/goods?id=undefined&goodsId=${item.id}`,
				});
			},
			loadmore() {
				if (this.loadingType == 'noMore') return
				this.params.pageNumber++;
				this.loadData();
			}
		},
	};
</script>
<style>
	.pay-password-wrapper .u-drawer-bottom {
		background-color: transparent;
	}
</style>
<style lang="scss">
	@import "../search/search.scss";

	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 100rpx;
		flex-direction: column;

		image {
			width: 400rpx;
			height: 400rpx;
		}

		p {
			color: #666;
			margin-top: 50rpx;
			font-size: 28rpx;
			letter-spacing: 6rpx;
		}
	}

	.evaluate {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(255, 137, 33, 1);
		margin-bottom: 10upx;

		.grade {
			font-size: 26upx;
		}

		.sales {
			font-size: 20upx;
			color: rgba(173, 170, 170, 1);
		}
	}
</style>
